<template>
  <view class="_wrapper">
    <view class="pay-box" v-if="molds === '1'">
      <image class="pay-logo" :src="paySuccessRedImg" />
      <view class="pay-txt">支付成功!</view>
      <!-- <view class="next-btn" @tap="toBooking">预订点餐享受免单哦</view> -->
	  <view @tap="toBooking" class="btn">
	  	<image src="https://zcgoods-1322033577.cos.ap-chengdu.myqcloud.com/zcgoods%2Flb.gif"></image>
	  	<text class="text">预订点餐享受免单哦</text>
	  </view>
	  <view class="next-btn" @tap="toMy">查看订单取餐码</view>
    </view>
	
	<view class="pay-box" v-if="molds === '2' && userInfo && userInfo.phone">
	  <image class="pay-logo" :src="paySuccessRedImg" />
	  <view class="pay-txt">支付成功!</view>
	  <view class="next-btn" @tap="toMy">支付成功,查看订单取餐码</view>
	</view>
	
	<!--未填写手机号码-->
	<uni-popup ref="popupRef">
		<view class="pay_success">
			<image class="success_img" :src="paySuccessRedImg" />
			<view class="pay_bg">
				<input class="mobile-input" type="tel" v-model="mobile" placeholder="保存手机号免单几率更高" placeholder-class="mobile-placeholder" />
				<view class="btn" @tap="saveMobile">保存手机号</view>
			</view>
		</view>
	</uni-popup>
  </view>
</template>
<script setup>
  import {ref} from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import {
    showToast,
		getWeiXinCode,
		wxLogin
	} from "@/common/util";
  import { setStorage } from "@/common/storage";
  import paySuccessRedImg from "@/static/icons/pay-success-red-icon.svg";

  const popupRef = ref();
  const userInfo = ref(null);
  const mobile = ref("");
  const molds = ref('1');  // 1:非预定 2预定
  const toBooking = () => {
    uni.switchTab({
      url: "/pages/orders/index"
    });
  }
  const toMy = () => {
	  uni.switchTab({
	  	url: '/pages/mine/index'
	  })
  }
  // 获取用户信息
	const fetchUserInfo = async () => {
		try {
			const data = await uni.$request.get(uni.$api.customerInfo);
			userInfo.value =  data || {};
      if (!userInfo.value.phone) {
        popupRef.value.open();
      }
		} catch (error) {
			console.error("error:", error);
		}
	}

  const updateUserInfo = () => {
    getWeiXinCode((code) => {
			wxLogin(code, {phone: mobile.value}).then((tokenObj) => {
				setStorage("token", tokenObj.tokenValue);
        fetchUserInfo();
        uni.switchTab({
					url: "/pages/mine/index"
				});
			});
		});
  }

  const saveMobile = () => {
    if (!mobile.value) {
      showToast("请输入手机号!");
      return ;
    }
    updateUserInfo();
  }

  onLoad((query) => {
	molds.value = query.molds
    fetchUserInfo();
  });
</script>
<style>
.mobile-placeholder {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.pay-box {
  width: 500upx;
  margin-left: auto;
  margin-right: auto;
  padding-top: 200upx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .pay-logo {
    width: 150upx;
    height: 150upx;
  }
  .pay-txt {
    margin-top: 30upx;
    font-size: 40upx;
  }
  .next-btn {
    width: 380upx;
    height: 90upx;
    border-radius: 100upx;
    background: #FF4D56;
    margin-top: 50upx;
	box-shadow: 0px 2upx 4upx rgba(0, 0, 0, 0.2);

    color: #FFF;
    font-size: 30upx;
    font-style: normal;
    font-weight: 500;
    line-height: 90upx;
    text-align: center;
  }
}
.pay_success {
		width: 690upx;
		height: 500upx;
		position: relative;
		
		.success_img {
			position: absolute;
			z-index: 33;
			width: 200upx;
			height: 200upx;
			margin: auto;
			left: 0;
			right: 0;
			bottom: 0;
			top: -300upx;
      background-color: #FFF;
      border-radius: 100upx;
		}
		.pay_bg {
			position: absolute;
			z-index: 22;
			height: 30vh;
			width: 80%;
			top: 100upx;
			margin: auto;
			left: 10%;
			border-radius: 20upx;
			background: linear-gradient(red, white);
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		.mobile-input {
      width: 450upx;
      height: 80upx;
      border-radius: 10upx;
      border: 1upx solid #fff;
      margin-left: auto;
      margin-right: auto;
      margin-top: 140upx;
      padding-left: 20upx;
      box-sizing: border-box;
      color: #FFF;
    }
		.btn {
			padding-left: 16upx;
			padding-right: 16upx;
			height: 100upx;
			border-radius: 100upx;
			background: #FF4D56;
			margin: 0;
			color: #FFF;
			font-size: 30upx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			box-shadow: 0px 2upx 4upx rgba(0, 0, 0, 0.2);
		}
	}
	
	.btn {
		padding-left: 16upx;
		padding-right: 16upx;
		height: 100upx;
		border-radius: 100upx;
		background: #FF4D56;
		margin: 0;
		color: #FFF;
		font-size: 30upx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		box-shadow: 0px 2upx 4upx rgba(0, 0, 0, 0.2);
		image {
			width: 100rpx;
			height: 140rpx;
			transform: translateY(-10px);
		}
	}
</style>